<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>轮播图左右运动版</title>
	<!-- IMPORT CSS -->
	<link rel="stylesheet" href="css/reset.min.css">
	<link rel="stylesheet" href="css/index.css">
</head>

<body>
	<!-- 轮播图容器 -->
	<div class="container">
		<!-- WRAPPER存放所有的图 -->
		<div class="wrapper">
			<!-- SLIDER每一个轮播图 -->
			<div class="slider">
				<img src="images/banner01.png" alt="">
			</div>
			<div class="slider">
				<img src="images/banner02.png" alt="">
			</div>
			<div class="slider">
				<img src="images/banner03.jpg" alt="">
			</div>
			<div class="slider">
				<img src="images/banner04.png" alt="">
			</div>
			<!-- 克隆的那份（无缝衔接） -->
			<div class="slider">
				<img src="images/banner01.png" alt="">
			</div>
		</div>

		<!-- PAGENATION分页器 -->
		<ul class="pagination">
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

		<!-- 左右按钮 -->
		<a href="javascript:;" class="arrow changeLeft"></a>
		<a href="javascript:;" class="arrow changeRight"></a>
	</div>

	<!-- IMPORT JS -->
	<script src="js/index.js"></script>
</body>

</html>